<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<script src="plug-in/echart/echarts.min.js"></script>
<div class="easyui-layout" fit="true">

 <div region="north" style="padding:0px;border:0px;height:200px;">
 	<div id="main" style="height:180px;width:90%;"></div>
 </div>

  <div region="center" style="padding:0px;border:0px">
  <t:datagrid name="deviceList" checkbox="true" 
  fitColumns="true" title="实验室使用统计" 
  actionUrl="rptRoomDeviceUseController.do?datagrid" idField="id" fit="true" queryMode="group">
  
  <t:dgCol title="开始日期"  field="beginDate"  hidden="true"  query="true" queryMode="single"  width="30"></t:dgCol> 
  <t:dgCol title="结束日期"  field="endDate"  hidden="true"  query="true" queryMode="single"  width="30"></t:dgCol> 
  
   <t:dgCol title="主键"  field="id"  hidden="true"  queryMode="single"  width="120"></t:dgCol>
   <t:dgCol title="楼栋"  field="buildingNo"     queryMode="single"  width="120"></t:dgCol> 
   <t:dgCol title="房号"  field="roomNo"     queryMode="single"  width="120"></t:dgCol>  
   <t:dgCol title="预约次数"  field="appointCount"   queryMode="single"  width="120"></t:dgCol>
   <t:dgCol title="总时长"  field="totalTime"    queryMode="single"  width="120"></t:dgCol> 
   <t:dgToolBar title="导出" icon="icon-putout" funname="ExportXls"></t:dgToolBar>
   </t:datagrid>
  </div>
 </div>
  <script type="text/javascript">
 $(document).ready(function(){
	  $("#deviceListtb").find("input[name='beginDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
	  $("#deviceListtb").find("input[name='endDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});

	  $("#deviceListtb").find("input[name='beginDate']").val('${beginDate}');
	  $("#deviceListtb").find("input[name='endDate']").val('${endDate}');
	  
	  $('#deviceList').datagrid({
		  onLoadSuccess:function(){
			  fillRpt1();
		  }
	  });
	  

 });
 
 function fillRpt1(){
	  var begin = $("#deviceListtb").find("input[name='beginDate']").val();
	  var end = $("#deviceListtb").find("input[name='endDate']").val();
	  
	  $.ajax({
		  url:"./rptRoomDeviceUseController.do?rptdata1&begin="+begin+"&end="+end,
		  success:function(d){
			  d = $.parseJSON(d);
			  option2 = {
					  title : {
					        text: '实验室使用统计 ',
					        subtext: begin+"-"+end,
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        }
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis : [
					        {
					            type : 'category',
					            data : []
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					        }
					    ],
					    series : [
					        {
					            name:'实验室信息',
					            type:'bar',
					            data:[]
					        } 
					    ]
					};
			  
			  for(var i=0;i<d.length;i++){
				  var rpt = d[i];
				  option2.xAxis[0].data.push(rpt.roomNo);
				  option2.series[0].data.push(rpt.appointCount); 
			  }
			  
			  var myChart2 = echarts.init(document.getElementById('main'));
			  myChart2.setOption(option2);
		  }
	  });
 }
 
 
  

//导出
function ExportXls() {
	JeecgExcelExport("rptRoomDeviceUseController.do?exportXls","deviceList");
}
 
 </script>